<template>
    <div class="center-list">

        <a class="item" :href="href('orderList')">
            <span class="item-left left-order-bg">我的订单</span>
            <span class="item-right"></span>
        </a>


        <a class="item" :href="href('coupons')">
            <span class="item-left left-discount-bg">我的优惠券</span>
            <span class="item-right"></span>
        </a>

    </div>
</template>
<script>
    export default {
        props: ['store'],
        methods: {
            href(path){
                return `/${path}?store=${this.store}`
            }
        }
    }
</script>
<style lang="less" scoped>
    .center-list {
        margin-top: 33px;
        width: 100%;
        .item {
            height: 60px;
            font-size: 18px;
            color: #000000;
            line-height: 60px;
            border-top: 1px solid #EDEDED;
            display: flex;
            justify-content: space-between;
            text-decoration: none;
            width: 100%;
        }
        .item + .item {
            border-bottom: 1px solid #EDEDED;
        }
        .item-right {
            width: 22px;
            height: 100%;
            display: inline-block;
            margin-right: 20px;
            background: url(./img/right.svg) no-repeat 0px 20px
        }
        .item-left {
            padding-left: 30px;
            height: 100%;
            display: inline-block;
            margin-right: 20px;
            margin-left: 10px;
            &.left-order-bg {
                background: url(./img/clipboard.svg) no-repeat 0px 20px
            }
            &.left-discount-bg {
                background: url(./img/tag.svg) no-repeat 0px 20px
            }
        }
    }
</style>